<template xmlns="http://www.w3.org/1999/html">
  <div class="info_back">
    <div class="productInfo">
      <div class="item_card">
        <div class="backBar">
          <el-button type="info" :icon="ArrowLeftBold" circle @click="back"></el-button>
        </div>

        <div class="card_top">
          <el-carousel class="item_imgBar" :interval="5000" arrow="always">
            <el-carousel-item v-for="(item, index) in imageList" :key="index" class="carousel_item">
              <div class="item_img_div">
                <img class="item_img" :src="item" alt="loading">
              </div>
            </el-carousel-item>
          </el-carousel>
          <div class="item_info">
            <h2 class="product-name">{{ itemData.name }}</h2>
            <p class="product-price">{{ itemData.price }} 元</p>
            <p class="product-stock">库存: {{ itemData.stock }} {{ itemData.unit }}</p>
            <p class="product-brand">品牌: {{ itemData.brandName }}</p>
            <p class="product-category">分类: {{ itemData.productCategoryName }}</p>
            <p class="product-sn">商品编号: {{ itemData.productSn }}</p>

            <div class="order_input">
              <el-button-group>
                <el-button type="primary" class="order_button" @click="createOrder" :disabled="itemData.stock <= 0">立即购买</el-button>
                <el-input-number
                    v-model="OrderNum"
                    :min="1"
                    :max="100"
                    :step="1"
                    :precision="0"
                    class="order_input_number"
                    :controls="true"
                    type="primary"
                ></el-input-number>
              </el-button-group>
            </div>

          </div>
        </div>
        <el-divider />

        <el-scrollbar class="item_content">
          <el-text tag="b">商品描述</el-text><br>
          <el-text tag="sup">{{ itemData.description }}</el-text><br>
          <el-text tag="b">关键词</el-text><br>
          <el-text tag="sup">{{ itemData.keywords }}</el-text><br>

        </el-scrollbar>
      </div>

      <el-scrollbar class="item_comment">
        <h3>商品评论</h3>
        <el-divider />

        <div class="comment-box">
          <el-input
              type="textarea"
              v-model="comment"
              placeholder="请输入评论"
              :rows="3"
              :maxlength="200"
              show-word-limit
              class="comment-input"
          ></el-input>
          <el-button type="primary"
                     @click="addCommentById"
                     :disabled="!comment.trim()"
                     class="comment-button"
                     :loading="commentLoading"
          >
            提交
          </el-button>
        </div>


        <div v-for="(comment, index) in comments" :key="index" class="comment">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>{{ strTurn(comment.memberNickName) }}</span>
              </div>
            </template>
            <p class="text item">{{ comment.content }}</p>
            <template #footer>评论时间:{{comment.createTime}}<br>ip属地:{{ comment.ipCity? comment.ipCity:'未知' }}</template>
          </el-card>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import { ArrowLeftBold } from '@element-plus/icons-vue';
import {addOrder, delOrder, updateOrder} from "@/apis/order.js";
import { userInfoState } from "@/stores/userInfoState.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {listComment, addComment} from "@/apis/comment.js";

const userInfo = userInfoState()

const props = defineProps({
  itemData: Object,
});

const judge = defineModel('judge');
const OrderNum = ref(1);
const comment = ref('')
const commentLoading = ref(false)

const back = () => {
  judge.value = false;
};

const strTurn = (str) => {
  if(str === '' || str == null) {
    return '暂无';
  }
  return str;
}

// 商品图片列表
const imageList = ref(props.itemData.albumPics);

// 评论数据
const comments = ref([]);

const createOrder = async () => {
   let data = {
     'totalAmount': props.itemData.price,
     'payAmount': props.itemData.price,
     'memberUsername': userInfo.getUsername(),
     'receiverName': userInfo.getUsername(),
     'receiverPhone': userInfo.getPhone(),
     'memberId': userInfo.getUserId(),
     'productId': props.itemData.id,
     'deleteStatus': OrderNum.value, //建立的订单购买的商品数
   }
  addOrder(data).then(res => {
    let orderId = res.data.id
    ElMessageBox({
      title: '确认支付',
      message: '是否确认支付?',
      showCancelButton: true,
      confirmButtonText: '支付',
      cancelButtonText: '取消',
      beforeClose: async (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = 'Loading...'
          let data = {
            'id': orderId
          }
          await updateOrder(data)
          instance.confirmButtonLoading = false
          done()
          ElMessage.success('支付成功')
          props.itemData.stock = props.itemData.stock - OrderNum.value
        } else {
          instance.cancelButtonLoading = true
          instance.cancelButtonText = 'Loading...'
          await delOrder(orderId)
          instance.cancelButtonLoading = false
          done()
          ElMessage.success('取消成功')
        }
      },
    })
  })
};

const getData = async () => {
  let query = {
    'id': props.itemData.id
  }
  listComment(query).then(res => {
    comments.value.push(...res.rows)
  })
}

const addCommentById = async () => {
  let query = {
    'productId': props.itemData.id,
    'memberNickName': userInfo.getNickname(),
    'productName': props.itemData.name,
    'content': comment.value
  }
  commentLoading.value = true
  addComment(query).then(res => {
    commentLoading.value = false
    comments.value = [];
    getData()
  }).catch(() => {
    commentLoading.value = false
  })
}

getData()

</script>

<style scoped>
.info_back {
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 10vh 0 0 10vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}
.productInfo {
  height: 80vh;
  width: 180vh;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
}
.item_card {
  height: 80vh;
  width: 100vh;
  border-right: 1px solid #a0cfff;
}
.backBar {
  height: 6vh;
  width: 100vh;
  padding-left: 2vh;
  display: flex;
  align-items: flex-end;
}
.card_top {
  height: 32.5vh;
  width: 100%;
  padding: 2vh 2vh 0 2vh;
  display: flex;
  justify-content: space-between;
}
.item_imgBar {
  height: 30vh;
  width: 55vh;
  margin: 0;
}
.carousel_item {
  height: 30vh;
  width: 55vh;
  margin: 0;
}
.item_img_div {
  height: 30vh;
  width: 55vh;
}
.item_img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.item_info {
  height: 30vh;
  width: 50vh;
  padding-left: 2vh;
}
.product-name {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}
.product-price {
  font-size: 20px;
  color: #e74c3c;
}
.product-stock,
.product-brand,
.product-category,
.product-sn,
.product-status {
  font-size: 16px;
  color: #666;
}
.item_content {
  height: 35vh;
  width: 100%;
  padding: 2vh;
}

.item_comment {
  height: 80vh;
  width: 80vh;
  padding: 2vh;
}
.comment {
  margin-bottom: 1vh;
}
.comment-user {
  font-weight: bold;
  color: #333;
}
.comment-content {
  color: #666;
}
.order_input{
  height: 5vh;
  width: 30vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2vh;
}
.order_input_number{
  height: 5vh;
  width: 15vh;
}
.order_button {
   font-size: 16px;
   font-weight: bold;
   height: 5vh;
 }

.comment-box {
  display: flex;
  align-items: flex-start;
  max-width: 600px;
  margin: 0 0 2vh;
}

.comment-input {
  flex-grow: 1;
}

.comment-button {
  height: auto; /* 自动适应输入框的高度 */
  align-self: stretch; /* 使按钮高度与输入框一致 */
}
</style>
